<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">条码授权</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-form-group">
					<view class="title">开始时间</view>
					<view class="action item-icon" @tap="toggleTab">
						{{bdate?bdate:"请选择"}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">结束时间</view>
					<view class="action item-icon" @tap="toggleTab2">
						{{edate?edate:'请选择'}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">机器</view>
					<view class="action item-icon" @tap="showModal">
						{{LREMARK?LREMARK:'请选择'}}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">授权人</view>
					<input type="text" disabled :value="LMAKEOPID" name="LMAKEOPID" />
				</view>
				<view class="">
					<image style="height: 600rpx;padding: 40rpx;width: 100%;" :src="image" mode="aspectFit" @tap="ViewImage"></image>
				</view>
				<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop="">
						<view class="cu-bar bg-white">
							<view class="action text-blue" @tap="hideModal">取消</view>
							<view class="action text-green" @tap="hideModal">确定</view>
						</view>
						<view class="grid col-3 padding-sm">
							<view v-for="(item,index) in checkbox[0]" class="padding-xs" :key="index">
								<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
								 :data-value="index"> {{item.LREMARK}}
									<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
								</button>
							</view>
						</view>
					</view>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-gradual-blue lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
		<w-picker mode="dateTime" startYear="2017" endYear="2030" step="1" :defaultVal="defaultVal1"
		 :current="false" @confirm="onConfirm" ref="dateTime" themeColor="#f00"></w-picker>
		<w-picker mode="dateTime" startYear="2017" endYear="2030" step="1" :defaultVal="defaultVal2"
		 :current="false" @confirm="onConfirm2" ref="dateTime2" themeColor="#f00"></w-picker>
	</view>
</template>

<script>
	import ButtonFather from "@/colorui/components/ButtonFather.vue";
	import wPicker from "@/colorui/components/w-picker/w-picker.vue";
	import utils from '@/static/js/utils.filter.js';
	import {
		mapGetters,
	} from "vuex";
	import {
		getselectReferList
	} from "@/service/selectList"
	import {
		getQRcode
	} from "@/service/selectList"
	export default {
		data() {
			return {
				isShow: false,
				modalName: null,
				date1: global.dateright,
				date2: global.dateright,
				height:this.screenHeight,
				defaultVal1:[],
				defaultVal2:[],
				checkbox: [],
				index1: 0,
				image: "",
				LREMARK: '',
				Vlod:[],
				imgList:[],
				LMAKEOPID: global.userinfo.lusername,
				bdate: '',
				edate: '',
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround','BackGroundBox'])

		},
		components: {
			ButtonFather,
			wPicker
		},
		onLoad() {
			let item = ['Y','m','d','H','i','s']
			for (var i = 0; i < 6; i++) {
				this.defaultVal1[i] = utils.timeTodate(item[i], new Date().getTime())
				this.defaultVal2[i] = utils.timeTodate(item[i], new Date().getTime() + 86400000 * 3)
			}
			getselectReferList( 1503, '表头', 'LMACHINENO', {}).then(res => {
				if (res.code != 0) {
					for (let item of res.data) {
						item.checked = false
					}
					this.$set(this.checkbox,0,res.data)
					this.isShow = true
				} else {
					this.isShow = true
				}
			}).catch(err => {
				this.isShow = true
				uni.showToast({
					title:'获取数据失败',
					icon:'none'
				})
			})
		},
		methods: {
			showModal(e) {
				this.modalName = 'ChooseModal'
			},
			ChooseCheckbox(e) {
				this.LREMARK = ''
				this.Vlod = []
				let items = this.checkbox[0];
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (i == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
				for (let item of items) {
					if(item.checked) {
						this.LREMARK = this.LREMARK + ' ' + item.LREMARK
						this.Vlod.push(item.LMACHINENO)
					}
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			DateChange1(e) {
				this.date1 = e.detail.value
			},
			DateChange2(e) {
				this.date2 = e.detail.value
			},
			toggleTab() {
				this.$refs.dateTime.show();
			},
			toggleTab2() {
				this.$refs.dateTime2.show();
			},
			onConfirm(val) {
				this.bdate = val.result
			},
			onConfirm2(val) {
				this.edate = val.result
			},
			//预览图片
			ViewImage(e) {
				if(this.image) {
					uni.previewImage({
						urls: this.imgList,
						current: '0'
					});
				}
			},
			formSubmit(e) {
				this.image = ''
				this.imgshow = false
				if(!this.bdate || !this.edate || this.Vlod == '' ) {
					uni.showToast({
						title:'请选择',
						icon:'none'
					})
				} else {
					getQRcode(this.bdate, this.edate, this.Vlod, global.userinfo.lusercode).then(res => {
						if(res.code != 0) {
							this.image = uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/image/UserImage/' + res.data.image
							this.imgList[0] = uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') +  '/image/UserImage/' + res.data.image
							
						} else {
							uni.showToast({
								title:'获取失败',
								icon:'none'
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
page {
		background-color: whitesmoke;
	}
</style>
